<template>
    <lay-card>
      <lay-container>
      <lay-row space="20">
        <lay-col style="margin-top: 20px">
          <lay-form :model="queryForm" :pane="true">
            <lay-row space="10">
              <lay-col md="5">
                <lay-form-item label="行业" mode="inline">
                  <lay-select v-model="queryForm.industry" >
                    <lay-select-option :value="item.value" :label="item.value" v-for="item in industries"></lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col md="5">
                <lay-form-item label="市场" mode="inline">
                  <lay-select v-model="queryForm.market">
                    <lay-select-option :value="item.value" :label="item.value" v-for="item in markets"></lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col md="5">
                <lay-form-item label="协议" mode="inline">
                  <lay-select v-model="queryForm.protocol">
                    <lay-select-option :value="item.value" :label="item.value" v-for="item in protocols"></lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col md="7">
                 <lay-date-picker  v-model="rangeTime" range type="datetime" :placeholder="['开始日期','结束日期']"></lay-date-picker>
              </lay-col>
            </lay-row>
            <lay-row>
              <lay-col md="6">
                <lay-button type="normal" @click="queryBatFiles">查询</lay-button>
                <lay-button @click="resetFrom">重置</lay-button>
                <lay-button @click="deleteRow" type="danger">删除</lay-button>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-col>
      </lay-row>
      <lay-row space="20">
        <lay-col md="24">
          <lay-table
            :page="page"
            :height="'500px'"
            style="min-height: 60%"
            :columns="columns"
            :loading="loading"
            :data-source="dataSource"
            v-model:selectedKeys="selectedKeys"
            @change="change"
          >
          <template v-slot:toolbar>
            <h3>现有行情消息分布记录</h3>
          </template>
<!--          <template v-slot:operator="{ row }">-->
<!--            <lay-button size="xs" type="normal" @click="decodeFile(row.id)">解码</lay-button>-->
<!--            <lay-button size="xs" type="danger" @click="deleteRow(row)">删除</lay-button>-->
<!--          </template>-->
        </lay-table>
        </lay-col>
      </lay-row>
    </lay-container>
    </lay-card>
</template>

<script lang="ts">
export default {
  name: "News"
}
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import {notify} from "../../../untils/tip";
import {countRecords, deleteRecordsAndData, queryRecords} from "../../../api/market/market";
import {getConfig} from "../../../api/market/basic";
import {layer} from "@layui/layui-vue";

const loading = ref(false);
const selectedKeys = ref([]);
const rangeTime = ref([]);
const columns = ref([
    { title:"选项", width: "5%", type: "checkbox", fixed: "left" },
    { title:"编号", width: "5%", key:"rowId", sort: "desc" },
    { title:"行业", width: "10%", key:"industry"},
    { title:"市场", width: "10%", key:"market"},
    { title:"协议", width: "10%", key:"protocol" },
    { title:"起始时间", width: "20%", key:"startTime", sort: "desc" },
    { title:"结束时间", width: "20%", key:"endTime", sort: "desc" },
    { title:"表名称", width: "25%", key:"tableName" },
    // { title:"操作", width: "20%", customSlot:"operator", key:"operator", fixed: "right" }
]);
const dataSource = ref([]);

// 页面加载前查询数据
onMounted(()=>{
  queryBatFiles();
  getSelectItems('industry');
  getSelectItems('market');
  getSelectItems('protocol');
});

// 下拉框选择的值
const industries: any = ref([]);
const markets: any = ref([]);
const protocols: any = ref([]);

const page = reactive({ current: 1, limit: 20, total: 10 });

const queryForm: any = reactive({
    industry: null,
    market: null,
    protocol: null,
    startTime: null,
    endTime: null,
    pageNo: page.current,
    pageSize: page.limit
});

const queryBatFiles = () => {
  page.current = 1;
  queryFilesCount();
  loadDataSource();
}

const change = () => {
  loading.value = true;
  setTimeout(() => {
    loadDataSource();
    loading.value = false;
  }, 1000);
};

const resetFrom = () => {
  queryForm.industry = null;
  queryForm.market = null;
  queryForm.protocol = null;
  queryForm.startTime = null;
  queryForm.endTime = null;
  rangeTime.value = [];
};

const queryFilesCount = async () => {
  if(rangeTime.value.length === 2 && rangeTime.value[0] !== ''){
    queryForm.startTime = rangeTime.value[0];
    queryForm.endTime = rangeTime.value[1];
  }
  let {data, code, message} = await countRecords(queryForm)
  if(code === 200){
    page.total = data;
  }else {
    notify('fail', message);
  }
};

const loadDataSource = async () => {
  dataSource.value = [];
  if(rangeTime.value.length === 2 && rangeTime.value[0] !== ''){
    queryForm.startTime = rangeTime.value[0];
    queryForm.endTime = rangeTime.value[1];
  }
  queryForm.pageNo = (page.current - 1)*page.limit;
  queryForm.pageSize = page.limit;
  let {code, data, message} = await queryRecords(queryForm)
  if(code === 200){
    data.forEach((unit: any)=>{
      unit.id = unit.rowId;
    });
    dataSource.value = data;
  }else {
    notify('fail', message);
  }
};

// 删除数据
const deleteRow = () => {
  if(selectedKeys.value.length === 0){
    layer.msg("没有勾选任何一行数据，无法删除！", {icon : 7, time: 1000})
  }else{
    layer.confirm("你确认要删除这些数据么？",
    {
      btn: [
        {text:'确认', callback: (id) => {
          deleteRowApi();
          layer.close(id); }
        },
        {text:'取消', callback: (id) => {
            layer.close(id); }
        }
        ]
      }
    );
  }
};

const deleteRowApi = async () => {
  const queryParams = reactive({rows: selectedKeys.value});
  let {code, data, message} = await deleteRecordsAndData(queryParams);
  if(code === 200){
    notify('success', message);
  }else {
    notify('fail', message);
  }
};


// 获取下拉列表选择的值
const getSelectItems = async (target: string) => {
  let {data, code, message} = await getConfig({target: target})
  if(code === 200){
    switch (target) {
      case 'market': markets.value = data; break;
      case 'industry': industries.value = data; break;
      case 'protocol': protocols.value = data; break;
    }
  }else {
    notify('fail', message);
  }
};

</script>

<style scoped>

</style>